<template>
  <section class="query">
    <yl-search :ylstyle="style" :submit="search" @getValue="getMobile"></yl-search>
    <div @click="issue()">
      <span>发布投送信息</span>
      <yd-icon name="next"  custom slot="icon" size="0.4rem"></yd-icon>
    </div>
    <div @click="query()">
      <span>查询用户投送</span>
      <yd-icon name="next"  custom slot="icon" size="0.4rem"></yd-icon>
    </div>
    <div @click="all()">
      <span>查询附近投送</span>
      <yd-icon name="next"  custom slot="icon" size="0.4rem"></yd-icon>
    </div>
    <div class="content">
      <div v-for="(item,index) in issueList" :key="index" @click="advertisingPush(index)">
        <span>
          <img :src="ip+item.cardPic">
        </span>
        <span>{{item.title}}</span>
      </div>
    </div>
  </section>
</template>
<script>
  import ylSearch from '@/components/search'
  export default {
    components:{
      ylSearch
    },
    data(){
      return {
        ip:null,
        style:{
          height:'1',//高度，必须
          bgcolor:'#FFB36E',//背景，可选
          remind:'搜索想找服务或产品',//placeholder可选
        },
        searchValue:null,
        issueList:null,

      }
    },
    methods:{
      getMobile(e){
//        alert(e)
        this.searchValue = e
      },
      search(){  //查询数据
//        alert('OK')
        let datas = this.$store.state.issueContent;
        let issueList = new Array();
        for(var i=0;i<datas.length;i++){
          let state1 = JSON.stringify(datas[i].cardContents).indexOf(this.searchValue);
          let state2 = datas[i].title.indexOf(this.searchValue)
          if(state1!= '-1'||state2!=-1){
            issueList.push(datas[i])
          }
        }
        setTimeout(()=>{
          if(issueList.length!=0){
            this.$router.push({name:'queryIssueList',query:{datas:issueList}})
          }else {
            plus.nativeUI.toast("未找到相关信息");
          }
        },500)
      },
      issue(){ //往投送发布跳转
        this.$router.push({name:'issue'})
      },
      advertisingPush(n){
        this.$router.push({path:'/chat/advertisingPush',query:{id:this.issueList[n]}})
      },
      all:function () {
        this.$router.push({name:'contentList'})
      },
      http: function () {
        this.ip = this.$store.state.ip
        this.issueList = this.$store.state.issueContent
      },
      query: function () {
        let data = {
          userID:localStorage.userid
        }
        this.ylAjax.myCards(data).then(msg=>{
          this.$router.push({name:'queryIssueList',query:{datas:msg.data}});
          console.log(msg)
        })
      }
    },
    activated(){
      this.http()
    }
  }

</script>
<style lang="less" scoped>
  @import "~less/base";
  .query{
    position: absolute;
    width: 100%;
    height: 100%;
    background: @query-bg;
    overflow: scroll;
    padding-bottom: 0.94rem;
    >div{
      padding: 0 0.2rem;
      height: 1rem;
      line-height: 1rem;
      width: 100%;
      border-top: 1px solid #cccccc;
      font-size: 16px;
      >i{
        float: right;
      }
    }
    >div:active{
      background: #cccccc;
    }
    >.content{
      height: auto;
      >div{
        border-bottom: 1px solid #c2c2c2;

        >span:nth-child(1){
          display: inline-block;
          width: 1rem;
          height: 0.7rem;
          overflow: hidden;
          >img{
            margin-top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 100%;
          }
        }
        >span:nth-child(2){
          display: inline-block;
          margin-left: 0.2rem;
          width: 80%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      >div:active{
        background: #c2c2c2;
      }

    }
    >.content:active{
      background: white;
    }
  }
</style>
